var middle = document.querySelector(".middle");
var middofsl = middle.offsetLeft;
middle.addEventListener("touchstart",function(){
	var finger = event.touches[0];
	var x1 = finger.pageX - middofsl;
	function suibian(event) {
			var f2 = event.touches[0];
			var x2 = f2.pageX - x1;
			if (x2 > 10) {
				x2 = 10;
			} else if (x2 < 20) {
				x2 = -20;
			}
			middle.style.left = x2 + "px";
			event.preventDefault();
		}
		middle.addEventListener("touchmove", suibian)
		middle.addEventListener("touchend", function() {
		middle.removeEventListener("touchmove", suibian);
		})
})


var contents = document.querySelectorAll(".content");
var btns = document.querySelectorAll(".middle div");
for (var i=0;i<btns.length;i++) {
	btns[i].index=i;
	btns[i].onclick=function(){
		for (var j=0;j<btns.length;j++) {
		btns[j].className="";
		contents[j].style.display="none";
	}
	this.className="btnAft";
	contents[this.index].style.display="block"
	}
}